<!--
 * @Description: 常规属性面板
 * @Author: DHL
 * @Date: 2022-04-18 14:45:52
 * @LastEditors: DHL
 * @LastEditTime: 2023-06-13 08:56:50
-->

<template>
  <div class="process-panel-tab__content">
    <el-form ref="dbFormRef" :model="baseForm" label-width="80px">
      <!-- <el-form-item label="主键" prop="id">
        <el-input v-model="baseForm.id" clearable @change="updateBaseInfo('id')"></el-input>
      </el-form-item> -->

      <el-form-item label="名称" prop="name">
        <el-input v-model="baseForm.name" clearable @change="updateBaseInfo('name')"></el-input>
      </el-form-item>

      <template v-if="baseForm.$type === 'bpmn:Process'">
        <el-form-item label="版本标签" prop="versionTag">
          <el-input
            v-model="baseForm.versionTag"
            clearable
            @change="updateBaseInfo('versionTag')"
          ></el-input>
        </el-form-item>
        <el-form-item label="可执行" prop="isExecutable">
          <el-switch
            v-model="baseForm.isExecutable"
            active-text="是"
            inactive-text="否"
            @change="updateBaseInfo('isExecutable')"
          />
        </el-form-item>

        <el-form-item label="分类" prop="processCategory">
          <el-input
            v-model="baseForm.processCategory"
            clearable
            @change="updateBaseInfo('processCategory')"
          ></el-input>
        </el-form-item>
      </template>

      <el-form-item label="状态" v-if="baseForm.$type === 'bpmn:SubProcess'">
        <el-switch
          v-model="baseForm.isExpanded"
          active-text="展开"
          inactive-text="折叠"
          @change="updateBaseInfo('isExpanded')"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
  export default { name: 'PanelBase' }
</script>

<script setup lang="ts">
  import { assign, cloneDeep } from 'lodash-es'
  import { nextTick, reactive, watch } from 'vue'
  import { useBpmnStore } from '../../store/bpmn'

  //////////////////////////////////////////////////
  // 属性
  //////////////////////////////////////////////////
  const bpmnStore = useBpmnStore()

  const baseForm: any = reactive({
    id: '',
    name: '',
    $type: '',
    versionTag: '',
    documentation: '',
    processCategory: '',
    isExecutable: true,
    isExpanded: true
  })

  watch(
    () => bpmnStore.activatedElementId,
    (newVal) => {
      if (newVal) {
        nextTick(() => {
          resetBaseInfo()
        })
      }
    },
    {
      immediate: true
    }
  )

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////
  /**
   * 重置
   */
  function resetBaseInfo() {
    const bpmnElement = bpmnStore.activatedElement

    const businessObject = cloneDeep(bpmnElement.businessObject)

    assign(
      baseForm,
      {
        id: '',
        name: '',
        $type: '',
        versionTag: '',
        documentation: '',
        processCategory: '',
        isExecutable: true,
        isExpanded: true
      },
      businessObject
    )

    if (baseForm.$type === 'bpmn:SubProcess') {
      baseForm.isExpanded = bpmnElement.di.isExpanded
    }

    if (baseForm.$type === 'bpmn:Process') {
      baseForm.processCategory = bpmnElement.businessObject.$parent.targetNamespace
    }
  }

  /**
   * 更新
   */
  function updateBaseInfo(key: string) {
    const bpmnElement = bpmnStore.activatedElement
    if (key === 'id') {
      bpmnStore.updateProperties({
        id: baseForm[key],
        di: { id: `${baseForm[key]}_di` }
      })
      return
    }

    if (key === 'isExpanded') {
      bpmnStore.modeling.toggleCollapse(bpmnElement)
      return
    }

    if (key === 'processCategory') {
      bpmnElement.businessObject.$parent.targetNamespace = baseForm[key]
    }

    const attrObj = {
      [key]: baseForm[key]
    }

    bpmnStore.updateProperties(attrObj)
  }
</script>
